<template>
  <div class="loginmodal">
    <el-dialog
      :visible.sync="forget"
      width="436px"
      :before-close="hidef"
      :close-on-click-modal="false"
      custom-class="curstom-login"
    >
      <span slot="title">
        <img class="loginmodal-img" :src="require('../assets/3.png')" alt="" />
      </span>

      <p class="cl4d fs20 fw500 pb24">忘记密码</p>
      <!-- <p class="pb24 cl80">{{step===1?'验证手机号':'重设密码'}}</p> -->

      <el-form v-show="step === 1" :model="form" ref="ruleForm" :rules="rules">
        <el-form-item label="" prop="mobile">
          <el-input
            placeholder="请输入手机号"
            v-model="form.mobile"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="" prop="password">
          <el-input
            placeholder="密码"
            v-model="form.password"
            autocomplete="off"
          ></el-input>
        </el-form-item> -->

        <el-form-item label="" prop="userpass">
          <el-input
            placeholder="请输入密码"
            v-model="form.userpass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="checkUserpass">
          <el-input
            placeholder="再次输入新密码"
            v-model="form.checkUserpass"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item class="spite" label="" prop="captcha">
          <el-input
            placeholder="图形验证码"
            v-model="form.captcha"
            autocomplete="off"
          ></el-input>
          <!-- <img :src="require('../assets/3.png')" alt="" /> -->
          <img :src="captchaIdUrl" alt="" @click="getCaptchaId"/>
        </el-form-item>

        <el-form-item class="spite" label="" prop="checkpass">
          <el-input
            placeholder="手机验证码"
            v-model="form.checkpass"
            autocomplete="off"
          ></el-input>
          <el-button plain type="primary" :disabled="codedisable" @click="setcount" class="getcode fw400 cl0097"> {{countdowntext}} </el-button>
        </el-form-item>

        <el-form-item label="">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确认</el-button
          >
        </el-form-item>
        <p class="fs13 cl9 flex jcs">
          <span class="curp" @click="gotologin">已有账号？去登录</span>
        </p>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getCaptchaId, register, getCaptchaIdUrl, sendBindMsg, createAndLoginWithBindMobile } from '@/http/protocol'

console.log(getCaptchaId, register, getCaptchaIdUrl, sendBindMsg, createAndLoginWithBindMobile)
const countdown = 3

export default {
  name: 'forget',
  computed: {
    ...mapState('user', ['forget']),
    countdowntext () {
      if (this.codedisable) {
        return `重新获取 ${this.countdown}`
      } else {
        return '获取验证码'
      }
    },
    captchaIdUrl () {
      console.log(this.captchaId)
      return getCaptchaIdUrl(this.captchaId)
    }
  },
  mounted () {
    this.getCaptchaId()
  },
  data () {
    var validateMobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      }
      callback()
    }
    var checkpass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value !== this.form.userpass) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        mobile: '',
        checkpass: '',
        captcha: '',
        userpass: '',
        checkUserpass: ''
      },
      rules: {
        mobile: [{ validator: validateMobile, trigger: 'blur' }],
        checkpass: [{ required: true, message: '请输入手机验证码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }],
        userpass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        checkUserpass: [{ validator: checkpass, trigger: 'blur' }]

      },
      step: 1,
      codedisable: false,
      countdown,
      timeout: null,
      captchaId: null

    }
  },
  methods: {
    ...mapMutations('user', ['hidelogin', 'showlogin', 'hideforget']),
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { mobile, checkpass, userpass } = this.form
          const param = { mobile, checkpass, userpass }
          console.log(param)
          const res = await createAndLoginWithBindMobile(param)
          console.log(res)
          if (res.success) {
            const res1 = await register()
            console.log(res1)
            if (res1.success) {
              this.$confirm('重置密码成功，去登录？').then(res => {
                this.hideforget()
                this.showlogin()
              })
            } else {
              this.$err(res1.msg)
            }
          } else {
            this.$err(res.msg)
            this.getCaptchaId()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    hidef () {
      this.hideforget()
    },
    gotologin () {
      this.hidef()
      this.showlogin()
    },
    async setcount () {
      const { mobile, captcha } = this.form
      const { captchaId } = this
      if (!mobile) {
        this.$err('请输入手机号')
        return
      }
      if (!captcha) {
        this.$err('请输入图形验证码')
        return
      }
      this.timeout && clearInterval(this.timeout)
      this.codedisable = true
      this.timeout = setInterval(() => {
        this.countdown--
        if (this.countdown === 0) {
          this.countdown = countdown
          this.codedisable = false
          clearInterval(this.timeout)
        }
      }, 1000)

      const param = { mobile, captchaId, captcha }
      console.log(param)

      const res = await sendBindMsg(param)
      if (res.success) {
        this.$ok('验证码已发送')
      } else {
        this.$err(res.msg)
        this.getCaptchaId()
      }
      console.log(res)
    },
    async getCaptchaId () {
      const res = await getCaptchaId()
      const { success, data } = res
      if (success) {
        this.captchaId = data
        console.log(this.captchaId)
      }
    }
  }
}
</script>
<style lang="less" scope>
.loginmodal {
  .loginmodal-img {
    width: 107px;
    height: 51px;
  }
  .curstom-login {
    background: #fafafa;
    padding-bottom: 30px;
  }
  .el-input {
    input {
      height: 48px;
    }
  }
  .el-button {
    width: 100%;
    height: 48px;
  }
  .curp {
    &:hover {
      color: #009769;
    }
  }
  .spite {
    position: relative;
    img {
      position: absolute;
      right: 4px;
      top: 4px;
      width: 96px;
      height: 40px;
      border-radius: 2px;
      border: 1px solid #f4f4f4;
      cursor: pointer;
      &:hover {
        background: #f4f4f4;
      }
    }
    input {
      padding-right: 100px;
    }
  }
}
</style>
